<template lang="html">
  <article id="views-coach_detail">
    <div class="coach_detail-wrapper">
      <Banner
        :banners="coachDetail && coachDetail.coachPicList"
      ></Banner>
      <CoachInfo
        :coachDetail="coachDetail"
      ></CoachInfo>
      <div class="coach_detail-courses">
        <div class="coach_detail-divline">
          <span>课程安排</span>
        </div>
        <CourseItem
          v-for="(item, index) in courseList"
          :key="item.subjectId"
          :courseDetail="item"
          v-if="index < 4 || !item.isEnd"
        ></CourseItem>
        <Loadmore v-on:loadmore="loadmore" v-show="!noCourses && canLoadMore"></Loadmore>
        <footer class="coach_detail-none" v-if="noCourses">导师暂未开课，敬请期待</footer>
      </div>
    </div>
  </article>
</template>

<script>
const isLoadmore = function(page){
  return function(req){
    if(!!page){
      req.query({ page })
    }
  }
}

import superagent from 'superagent'
import utils from '@/lib/utils'
import authMiddleWare from '@/lib/auth-middleware'

export default {
  name: 'PageCoachDetail',
  components:{
    Banner: require('@/components/course_detail/banner'),
    CoachInfo: require('@/components/coach_detail_info'),
    CourseItem: require('@/components/index_list/course_item'),
    Loadmore: require('@/components/common_loadmore')
  },
  data(){
    return {
      coachDetail: null,
      courseList: [],
      currentPage: 1,
      screenHeight: 0,
      containerEle: null,
      wrapperEle: null,
      canLoadMore: true
    }
  },
  computed: {
    noCourses(){
      return !this.courseList || this.courseList.length == 0
    }
  },
  created(){
    this.getCoachInfo(this.$route.params.coach_id)
    .then(data => {
      this.coachDetail = data
    })

    this.getCoachCourses({ coachId: this.$route.params.coach_id })
    .then(data => {
      this.courseList = this.addCourseIsEnd(data)
    })
  },
  mounted(){
    this.screenHeight = window.innerHeight
    this.containerEle = document.querySelector('#views-coach_detail')
    this.wrapperEle = this.containerEle.querySelector('.coach_detail-wrapper')
  },
  methods: {
    getCoachInfo(coachId){
      return new Promise((resolve, reject) => {
          superagent.post('/api/coach/info')
            .use(authMiddleWare())
            .query({ coachId })
            .end((err, res) => {
              if(res.ok){
                resolve(res.body.data)
              } else {
                reject(new Error('getCoachInfo error'))
              }
            })
      })
    },
    getCoachCourses({ coachId, page }){
      return new Promise((resolve, reject) => {
        superagent.post('/api/subject/index')
          .use(authMiddleWare())
          .use(isLoadmore(page))
          .query({ coachId })
          .end((err, res) => {
            if(res.ok){
              resolve(res.body.data.records)
            } else {
              reject(new Error('getCoachCourses error'))
            }
          })
      })
    },
    loadmore(){
      this.$store.dispatch('toggleIsLoading')
      this.getCoachCourses({
        coachId: this.$route.params.coach_id,
        page: this.currentPage + 1
      })
      .then(data => {
        let newList = this.addCourseIsEnd(data)
        if(newList.length > 0){
          this.currentPage++
          this.courseList = this.courseList.slice(0).concat(newList)
        } else {
          utils.toast('已加载全部课程')
          this.canLoadMore = false
        }
        this.$store.dispatch('toggleIsLoading')
      })
    },
    addCourseIsEnd(list){
      list.forEach(item => {
        item.isEnd = +new Date() > parseInt(item.endTime, 10)*1000
      })
      return list
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../css/config';
#views-coach_detail{
  width: 100%;
  height: 100%;
  overflow: scroll;
  background-color: $common-bg;
  .coach_detail-wrapper{
    width: 100%;
    padding-bottom: 25px;
    .coach_detail-courses{
      width: 100%;
      box-sizing: border-box;
      padding: 0 32px;
      overflow: hidden;
      .coach_detail-divline{
        margin: 30px 0;
        width: 100%;
        color: $common-red;
        font-size: 23.75px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        &::before{
          display: block;
          content: '';
          width: 224px;
          border-bottom: 2px solid #ff4908;
        }
        &::after{
          display: block;
          content: '';
          width: 224px;
          border-bottom: 2px solid #ff4908;
        }
      }
      .coach_detail-none{
        width: 100%;
        text-align: center;
        font-size: 35px;
        color: #fff;
        letter-spacing: 1Px;
      }
      .coach_detail-loadmore{
        display: block;
        line-height: 1.5;
        padding: 15px;
        text-align: center;
        font-size: 35px;
        color: #fff;
        border-radius: 20px;
        background-color: $common-red;
        &:active{
          color: $active-font;
          background-color: $active-bg;
        }
      }
    }
  }
}
</style>
